<template>
	<div class="pos">
		<div class="flex"> 
			<router-link class="fiex_left" :class="{active:isA}" to='/rj'>图片懒加载</router-link>
			<router-link class="fiex_right" to="/details">随笔</router-link>
			<router-link class="fiex_right" to="/xialist">下拉加载...</router-link>
		</div>
		<router-view></router-view>
	</div>
</template>
<script>
  export default{
  	data () {
  		return {
  			isA:true
  		}
  	}
  }
</script>
<style scoped>
	.pos{padding-bottom: 55px}
	.active{background: #4096ee;color: #fff;}
	.flex{
		position: fixed;
		bottom:0;
		width: 100%;
		display: flex;
		height: 50px;
	}
	.fiex_left{
		display:flex;
		align-items:center;width: 100%;
		justify-content:space-around;
		height: 50px;
	}
	.fiex_right{
		display:flex;
		align-items:center;
		justify-content:space-around;
		width: 100%;
		height: 50px;
	}
</style>